<template>
  <a-table
    class="table"
    :scroll="{
      scrollToFirstRowOnChange: true,
      x: '100%',
      ...(tableHeight
        ? {
            y: tableHeight,
          }
        : {}),
    }"
    :sticky="{ offsetHeader: (60 / 54) * htmlFontSize }"
    v-bind="tableProps"
    @change="(...params:any[]) => $emit('tableChange', ...params)"
    @resizeColumn="
        (w:number, col: ColumnItem) => {
          col.width = Math.max(w,col.minWidth||0);
        }
      "
  >
    <template #bodyCell="{ column, record, text }">
      <template
        v-if="column.dataIndex === 'action' && !record.children?.length"
      >
        <slot name="action" :record="record"></slot>
      </template>
      <template v-else-if="column.isCustom">
        <slot
          name="custom"
          :record="record"
          :column="column"
          :text="text"
        ></slot>
      </template>
      <span v-else-if="text === undefined">-</span>
      <span v-else :title="getValue({ column, record, text }, true)">{{
        getValue({ column, record, text })
      }}</span>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import { PaginationProps } from "ant-design-vue";
import { computed } from "vue";
defineProps<{
  tableHeight?: string | number;
  tableProps: {
    rowKey?: string;
    pagination: PaginationProps | boolean;
    dataSource: Record<string, any>[];
    columns?: ColumnItem[];
    rowSelection?: any;
    defaultExpandAllRows?: boolean;
  };
}>();
const htmlFontSize = computed(() => {
  return (
    +getComputedStyle(window.document.documentElement).fontSize.replace(
      "px",
      ""
    ) || 54
  );
});
const getValue = (
  {
    column,
    text,
    record,
  }: {
    column: ColumnItem;
    record: Record<string, any>;
    text: any;
  },
  noDefault?: boolean
) => {
  const renderRes = column.customRender?.({ text, column, record });
  let res = renderRes === undefined ? text : renderRes;
  if (res === undefined && !noDefault) {
    // 字段取值不存在
    return "-";
  }
  return res;
};
</script>
<style lang="scss" scoped></style>
